<template>
	<view class="cz_Gauge">
		<qiun-data-charts type="gauge" :opts="Cmopts" :chartData="CmchartData" />
	</view>
</template>

<script>
export default {
	name: "WeightGauge",
	props:{
		MaxWeight:{
			default:0,
			type:Number
		},
		WeightValue:{
			default:0,
			type:Number
		},
		Fixed:{
			default:0,
			type:Number
		},
		Floor:{
			default:0,
			type:Number
		},
		Ceiling:{
			default:0,
			type:Number
		},
	},		    
	watch:{
		MaxWeight:{
			immediate:true,
			handler(){
				let Fixed = (0.1 ** this.Fixed).toFixed(this.Fixed) == 0?1:(0.1 ** this.Fixed).toFixed(this.Fixed)
				// 根据 上下限参数 及最大量程来设置 仪表
				let Floor = {
					"value":this.Floor?(this.Floor / Fixed / this.MaxWeight).toFixed(2):0,
					"color":"#1890ff"
				}
				let Ceiling = {
					"value":this.Ceiling?(this.Ceiling / Fixed / this.MaxWeight).toFixed(2):1,
					"color":"#2fc25b"
				}
				let MaxWeight = {
					"value":1,
					"color":"#f04864",
				}
				let categories = [Floor,Ceiling,MaxWeight]
				this.CmchartData.categories = categories
			}
		},
		// 实时重量
		WeightValue:{
			immediate:true,
			handler(){
				let Fixed = (0.1 ** this.Fixed).toFixed(this.Fixed) == 0?1:(0.1 ** this.Fixed).toFixed(this.Fixed)
				let series = [
				  {
				    name: "完成率",
				    data: 0.8
				  }
				]
				let WeightBar = Number((this.WeightValue/ Fixed / this.MaxWeight).toFixed(1))
				series[0].data = WeightBar
				// 根据实时重量计算 其占最大量程的 百分比
				let title = {
					name: "0Kg",
					fontSize: 25,
					color: "#000",
					offsetY: 50
				}
				// 实际重量为 当前重量值 * 0.1 ** 精度值
				title.name = this.WeightValue + "Kg"
				this.$set(this.CmchartData,'series',series)
				this.$set(this.Cmopts,'title',title)
				
			}
		}
	},
	data() {
		return {
			CmchartData: {},
			//您可以通过修改 config-ucharts.js 文件中下标为 ['gauge'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
			Cmopts: {
				color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
					"#ea7ccc"
				],
				padding: undefined,
				title: {
					name: "0Kg",
					fontSize: 25,
					color: "#000",
					offsetY: 50
				},
				subtitle: {
					name: "实时重量",
					fontSize: 15,
					color: "#666666",
					offsetY: -50
				},
				extra: {
					gauge: {
						type: "default",
						width: 30,
						labelColor: "#666666",
						startAngle: 0.75,
						endAngle: 0.25,
						startNumber: 0,
						endNumber: 100,
						labelFormat: "",
						splitLine: {
							fixRadius: 0,
							splitNumber: 10,
							width: 30,
							color: "#FFFFFF",
							childNumber: 5,
							childWidth: 12
						},
						pointer: {
							width: 24,
							color: "auto"
						}
					}
				},
				update: true, // 关键：是否开启连续更新数据的方法,开启之后就不会抖动了
			}
		}
	},
	methods:{
	}
}
</script>

<style lang="scss">
.cz_Gauge{
	width: 100%;
	height: 100%;
	background-color: #fff;
}
</style>